import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react'
import { autoChart } from '@antv/chart-advisor'

const Chart14 = () => {
	const containerRef = useRef()

	const [container, setContainer] = useState(null)
	const [data, setData] = useState([])
	const [average, setAverage] = useState(6)

	useEffect(() => {
		setContainer(containerRef.current)
		setData(() => [
			{ label: '中南大学', value: 5 },
			{ label: '南开大学', value: 6 },
			{ label: '复旦大学', value: 9 },
			{ label: '清华大学', value: 2 },
			{ label: '浙江大学', value: 1 },
		])
	}, [])

	useEffect(() => {
		if (container) {
			;(async () => {
				await autoChart(container, data, {
					title: '测试图表',
					description: '测试描述',
					toolbar: true,
					development: true,
					// purpose: "Distribution",
					config: {
						configs: {
							padding: 'auto',
							theme: 'light',
							xField: 'label',
							yField: 'value',
							columnWidthRatio: 0.8,
							meta: {
								label: { alias: '学校' },
								value: {
									alias: '分数',
									formatter: (value) => `${value}%`,
								},
							},
							annotations: [
								{
									type: 'regionFilter',
									start: [-0.5, average],
									end: [data.length + 0.5, '0'],
									color: '#F4664A',
								},
								{
									type: 'text',
									position: [-0.5, average],
									content: '中位数',
									offsetY: -4,
									style: { textBaseline: 'bottom', fill: 'red' },
								},
								{
									type: 'line',
									start: [-0.5, average],
									end: [data.length + 0.5, average],
									style: {
										stroke: '#F4664A',
										lineDash: [2, 2],
									},
								},
							],
						},
						type: 'Column',
					},
				})
			})()
		}
	}, [container, data, average])

	return (
		<div>
			<div id={'chart14'} ref={containerRef} style={{ height: 400, width: 600 }} />
		</div>
	)
}

export default Chart14
